import { Row, Col, Tag } from 'antd';
import "./xhome.scss";
import React, { useState, useEffect } from 'react';
import * as echarts from 'echarts';
import moment from "moment";
import {
    getDayUserCount,
    getDayOrderCount,
    getDayAdminCount,
    getUserCount,
    getOrderCount,
    getAdminCount
} from "../../api/request.js";
import ECharts from "../../component/ECharts";

interface sevenDataType {
    userCount: number[]
    orderCount: number[]
    adminCount: number[]
}

const App: React.FC = () => {

    // 当日新增管理员数量
    const [dayUserCount, setDayUserCount] = useState(0)
    // 当日新增订单数量
    const [dayOrderCount, setDayOrderCount] = useState(0)
    // 当日新增管理员数量
    const [dayAdminCount, setDayAdminCount] = useState(0)
    // 用户数量
    const [userCount, setUserCount] = useState(0)
    // 订单数量
    const [orderCount, setOrderCount] = useState(0)
    // 管理员数量
    const [adminCount, setAdminCount] = useState(0)
    // 七天内数据
    const [sevenDay, setSevenDay] = useState<string[]>([])
    const [sevenData, setSevenData] = useState<sevenDataType>({
        userCount: [],
        orderCount: [],
        adminCount: [],
    })

    useEffect(() => {
        initData()
        initSevenData()
    }, [])

    // 当日数据和总数
    const initData = async () => {
        const today = new Date()
        Promise.all([
            getDayUserCount(today),
            getDayOrderCount(today),
            getDayAdminCount(today),
            getUserCount(),
            getOrderCount(),
            getAdminCount()]).then(res => {
                setDayUserCount(res[0].data.count)
                setDayOrderCount(res[1].data.count)
                setDayAdminCount(res[2].data.count)
                setUserCount(res[3].data.count)
                setOrderCount(res[4].data.count)
                setAdminCount(res[5].data.count)
            })
    }

    // 七天内数据
    const initSevenData = async () => {
        const sevenDays: string[] = []
        for (let i = 6; i > -1; i--) {
            const date = moment(new Date().getTime() - i * 24 * 3600 * 1000).format('YYYY-MM-DD')
            sevenDays.push(date)
        }
        // console.log(sevenDays);
        setSevenDay([...sevenDays])
        const dataObj: sevenDataType = {
            userCount: [],
            orderCount: [],
            adminCount: [],
        }
        for await (const item of sevenDays) {
            let res = await Promise.all([
                getDayUserCount(item),
                getDayOrderCount(item),
                getDayAdminCount(item),
            ])
            dataObj.userCount.push(res[0].data.count)
            dataObj.orderCount.push(res[1].data.count)
            dataObj.adminCount.push(res[2].data.count)
        }
        // console.log(dataObj);
        setSevenData(dataObj)

    }


    return (
        <div id="xhome" >
            <h1 className="xhome-title">数据统计</h1>
            <Row className="tags">
                <Col><Tag color="#FF9800" className="tag-head">当日数据：</Tag></Col>
                <Col><Tag color="#E5E9F2" className="tag-item"><span>{dayUserCount}</span>新增用户</Tag></Col>
                <Col><Tag color="#E5E9F2" className="tag-item"><span>{dayOrderCount}</span>新增订单</Tag></Col>
                <Col><Tag color="#E5E9F2" className="tag-item"><span>{dayAdminCount}</span>新增管理员</Tag></Col>
            </Row>
            <Row className="tags">
                <Col><Tag color="#20A0FF" className="tag-head">总数据：</Tag></Col>
                <Col><Tag color="#E5E9F2" className="tag-item"><span>{userCount}</span>注册用户</Tag></Col>
                <Col><Tag color="#E5E9F2" className="tag-item"><span>{orderCount}</span>订单</Tag></Col>
                <Col><Tag color="#E5E9F2" className="tag-item"><span>{adminCount}</span>管理员</Tag></Col>
            </Row>
            <br />
            <ECharts sevenDay={sevenDay} sevenData={sevenData} />
        </div >
    );
};

export default App;


